import React from 'react';
import { withStyles, makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import Typography from "@material-ui/core/Typography";
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';


const font_size = 20;

const temp = makeStyles({
  body1Select: {
    backgroundColor: "lightgreen",
  },

  title: {
    flex: '1 1 100%',
  },

  body1NoSelect: {

  },

  body2Select: {
    backgroundColor: "lightyellow",
  },

  body2NoSelect: {

  },

  border2: {
    border: "none",
    fontSize: font_size,
  },
  border1: {
    fontSize: font_size,
  }
});

let facN = 10;

const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
    fontSize: font_size,
  },
  body: {
    backgroundColor: (props) =>  props.backgroundColor,
    fontSize: font_size,
  },
}))(TableCell);


const StyledTableHeadCell = withStyles((theme) => ({
  head: {
    color: theme.palette.common.white,
    fontSize: font_size,
  },

}))(TableCell);


const StyledTableRow = withStyles((theme) => ({

  root: {
     backgroundColor: "#FAF6EA",
    // '&:nth-of-type(odd)': {
    //   backgroundColor: "#FAF6EA",
    // },
    // '&:nth-of-type(even)': {
    //   backgroundColor: "#FAF6EA",
    // },
  },
}))(TableRow);

const StyledTableRowHead = withStyles((theme) => ({
  root: {
    '&:nth-of-type(odd)': {
      backgroundColor: "#FF9400",
    },
    '&:nth-of-type(even)': {
      backgroundColor: "#FF9400",
    },
  },
}))(TableRow);

const generateDictForQuestion = (name, listRes) => {
  let list = [];
  list.push(name);
  listRes.map((x)=>list.push(x));
  return list;
}


const generateTable = (row) => {

  row.splice(0, 1);

  return row;
}

const useStyles = makeStyles({
  table: {
    // minWidth: "100px",
    // // display: "flex",
    width: "auto",
    margin: "auto",
    boxShadow: "none",
    float: "left"
  },
});


const handleEdges = (array, now) => {
  let final = [];
  let i = 0;
  for (let a of array) {
    let temp = [];
    temp.push(now === i ? <ArrowForwardIcon style={{color: "red"}}/>:"");
    for (let t of a) {
      temp.push(t);
    }
    final.push(temp);
    i++;
  }
  return final;
}


export default function TableForKruskal(props) {
  const classes = useStyles();

  const mod = temp();
  if (props.listN.length !== 0 && !props.reset) {
    let rows = handleEdges(props.sortEdge, props.nowEdge);

    let listN = [...props.listN];

    if (!props.reset && listN.length !== 0 )
    return (

    <TableContainer
        component={Paper}
        className={classes.table}
    >
      <div id = "dijkstraTable" style={{cursor: "move"}}>
      <Typography className={mod.title} variant="h5" id="tableTitle" component="div">
        {(props.tableName === undefined ? "": props.tableName)}
        </Typography>
      <Table className={classes.table} aria-label="customized table" >
        <TableHead>
          <StyledTableRowHead>

            <StyledTableHeadCell align="center"></StyledTableHeadCell>
            {listN.map(x=>(<StyledTableHeadCell  align="center">{x}</StyledTableHeadCell>))}

          </StyledTableRowHead>
        </TableHead>
        <TableBody id={"dijkstraBody"}>
          {rows.map((row, index) => (

              <StyledTableRow key={row[0]}>
                  <TableCell className={`${ index === 0 ? mod.border1: mod.border2}`} component="th" scope="row" align="center">
                    {row[0]}
                  </TableCell>

                 {generateTable(row).map((x, i)=>(<TableCell
                     // className={`${ mod.border1} ${(i === 0 || i === props.nowIndexRes) ? mod.body1Select : mod.body1NoSelect}`}
                     align={"center" }>{x}</TableCell>))}
            </StyledTableRow>)
          )}
        </TableBody>
      </Table>
        </div>
    </TableContainer>

  );
  }

}
